<template>
	<view>
		<nav-bar-resource :favoriteCount='this.resource.favoriteCount' @download='download' @star='star' :key='navKey'></nav-bar-resource>
		<view class="wrap">
			<view class="header">
				<view class="title">
					{{this.resource.name}}
				</view>
				<view class="info">
					<view class="left">
						<view class="subject">
							学科 : {{this.resource.subjectName}}
						</view>
						<!-- <view class="resinfo">
						<u-icon name="heart-fill"></u-icon>收藏
						<u-icon name="chat"></u-icon>评论
						<u-icon name="eye"></u-icon>浏览
						<u-icon name="download"></u-icon>下载
						<u-icon name="file-text"></u-icon>页
					</view> -->
					</view>
					<view class="right">
						<view class="rate">
							<u-rate :count="rateCount" :current="this.resource.grade" :disabled="true" :key='rateKey'></u-rate>{{resource.grade}}
						</view>
					</view>
				</view>
				<view class="resinfo">
					<view class="resinfoItem">
						<u-icon name="heart-fill"></u-icon>
						<view class="resinfoItemText">
							{{this.resource.totalRecords}}收藏
						</view>
					</view>
					<view class="resinfoItem">
						<u-icon name="chat"></u-icon>
						<view class="resinfoItemText">
							{{this.resource.totalRecords}}评论
						</view>
					</view>
					<view class="resinfoItem">
						<u-icon name="eye"></u-icon>
						<view class="resinfoItemText">
							{{this.resource.browserCount}}浏览
						</view>
					</view>
					<view class="resinfoItem">
						<u-icon name="download"></u-icon>
						<view class="resinfoItemText">
							{{this.resource.downloadCount}}下载
						</view>
					</view>
					<view class="resinfoItem">
						<u-icon name="file-text"></u-icon>
						<view class="resinfoItemText">
							{{this.resource.filePages}}页
						</view>
					</view>
				</view>
			</view>

			<view class="content">
				<u-image width="100%" height="500rpx" :src="this.resource.littleImgUrl" mode="scaleToFill"></u-image>
				<view class="backgroundWrap">
					<view class="buttonWrap" @click="loadResource">
						查看资源
					</view>
				</view>
			</view>

			<view class="comList">
				<view class="title">
					<view class="title-sidebar"></view>
					<view class="title-text">
						评论列表
					</view>
				</view>
				<view class="comWrap">
					<view class="combox" v-for="(item,index) in this.commentList" :key='index'>
						<view class="top">
							<view class="userInfo">
								<view class="avatar">
									<img loading="lazy" :src="item.imgPath">
								</view>
								<view class="name">
									{{item.userName}}
								</view>
							</view>
							<view class="rate">
								<u-rate :count="rateCount" :current="item.grade" :disabled="true"></u-rate>
							</view>
						</view>
						<view class="comContent">
							{{item.content}}
						</view>
						<view class="time">
							{{item.createTime}}
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
				<view class="toMakeCom" @click="toMakeCom">
					<view class="toMakeCombox">
						<u-icon name="edit-pen-fill"></u-icon>写留言，与作者互动
					</view>
					<view class="toMakeComicon">
						<u-icon name="chat" size="60"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="comPopup" mode="bottom" border-radius="15" height="25%">
			<view class="comment">
				<view class="box">
					<editor id="editor" class="ql-container" @input="getText" showImgToolbar @statuschange="onStatusChange" :read-only=false
					 @ready="onEditorReady">
						{{this.commentText}}
					</editor>
				</view>
				<view class="evaluate">
					<view class="rate">
						打分:<u-rate :count="rateCount" v-model="myRateCurrent"></u-rate>
					</view>
					<view class="comButton">
						<u-button @click="comment" size="mini" type="primary">发表评论</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
	</view>
</template>

<script>
	var wv
	export default {
		data() {
			return {
				rateCount: 5,
				rateCurrent: 0,
				myRateCurrent: 0,
				resource: {},
				loadUrl: '',
				commentText: '',
				commentList: [],
				navKey: 0,
				rateKey: 0,
				downloadToken: null,
				comNum: 5,
				comPage: 1,
				status: 'loadmore',
				comPopup: false
			}
		},
		methods: {
			download() {
				let downloadUrl = this.$store.state.base_url.toString() + "/resource/download?token=" + this.downloadToken.toString() +
					"&accessToken=" + this.$store.state.access_token.toString()

				const downloadTask = uni.downloadFile({
					url: downloadUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
						}
						console.log(res);
						
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: function(res) {
								console.log(res)
							}
						});
						
					}
				});

				downloadTask.onProgressUpdate((res) => {
					console.log('下载进度' + res.progress);
					console.log('已经下载的数据长度' + res.totalBytesWritten);
					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				});
			},
			star() {
				if (this.resource.favoriteCount === 0) {
					this.$api.collection(this.$store.state.access_token, this.resource.id, 1).
					then(res => {
						this.resource.favoriteCount = 1
					})
				} else {
					this.$api.collection(this.$store.state.access_token, this.resource.id, 0).
					then(res => {
						this.resource.favoriteCount = 0
					})
				}

			},
			loadResource() {
				this.$u.route('pages/webView/webView', {
					url: this.loadUrl
				});
			},
			getText(e) {
				this.commentText = e.detail.text
			},
			onEditorReady() {
				var that = this;
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context;
					this.editorCtx.setContents({ //赋值
						html: that.commentText
					});
				}).exec()
			},
			toMakeCom() {
				this.comPopup = true
			},
			comment() {
				if (this.commentText === '') {
					this.$refs.uToast.show({
						title: '评论内容不能为空',
						type: 'warning'
					})
					return
				}
				this.$api.comment(this.$store.state.access_token, this.resource.id, this.commentText, this.myRateCurrent)
					.then(res => {
						console.log(this.commentText);
						console.log(this.myRateCurrent);
						console.log(res);
						this.commentText = ''
						this.comPopup = false
						this.$refs.uToast.show({
							title: '评论成功',
							type: 'success'
						})
						setTimeout(() => {
							this.comPage = 1
							this.$api.getComments(this.$store.state.access_token, this.resource.id, this.comNum, this.comPage)
								.then(res => {
									this.commentList = res.values.records
									this.commentList.forEach((item, index) => {
										item.imgPath =
											`${this.$store.state.base_url}/system/loadImg?imgPath=${encodeURI(item.stuImgPath)}&accessToken=${this.$store.state.access_token}`
									})
									this.status = 'loadmore'
								})
						}, 1000)
					})
			}
		},
		onLoad(data) {
			this.$api.checkResource(this.$store.state.access_token, data.id)
				.then(res => {
					this.downloadToken = res.values.token
					this.resource = res.values.resource
					this.loadUrl = res.values.url
					this.resource.favoriteCount = res.values.favoriteCount
					this.navKey += 1
					return this.$api.getComments(this.$store.state.access_token, data.id, this.comNum, this.comPage)
				}).then(res => {
					console.log(res);
					if (res.values.records.length === 0) {
						this.status = 'nomore'
					} else {
						this.commentList = res.values.records
						this.commentList.forEach((item, index) => {
							item.imgPath =
								`${this.$store.state.base_url}/system/loadImg?imgPath=${encodeURI(item.stuImgPath)}&accessToken=${this.$store.state.access_token}`
						})
					}


				})
		},
		onReachBottom() {
			if (this.status === 'loadmore') {
				this.comPage += 1
				this.status = 'loading'
				this.$api.getComments(this.$store.state.access_token, this.resource.id, this.comNum, this.comPage)
					.then(res => {
						if (res.values.records.length === 0) {
							this.status = 'nomore'
						} else {
							res.values.records.forEach((item, index) => {
								item.imgPath =
									`${this.$store.state.base_url}/system/loadImg?imgPath=${encodeURI(item.stuImgPath)}&accessToken=${this.$store.state.access_token}`
								this.commentList.push(item)
							})
							this.status = 'loadmore'
						}
					})
			} else {

			}

		}
	}
</script>


<style lang="scss" scoped>
	page {
		background-color: $uni-bg-color;
	}

	.wrap {
		display: flex;
		flex-direction: column;

		.header {
			background-color: white;
			position: relative;
			box-sizing: border-box;
			padding: 0 10rpx 50rpx 10rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			border-bottom: 1px solid rgba(0, 0, 0, 0.2);

			.title {
				font-size: 36rpx;
				box-sizing: border-box;
				padding: 15rpx 10rpx 35rpx 15rpx;
			}

			.resinfo {
				box-sizing: border-box;
				padding: 10rpx 10rpx 0 10rpx;
				display: flex;
				color: #a39e9f;
				width: 100%;
				justify-content: space-around;
				align-items: center;

				.resinfoItem {
					display: flex;
					align-items: center;
					box-sizing: border-box;

					.resinfoItemText {
						padding-left: 5rpx;
						padding-right: 5rpx;
					}
				}
			}

			.buttons {
				position: absolute;
				right: 0;
				bottom: 50rpx;
				display: flex;
				background-color: white;
				color: #a39e9f;

				.download {
					border: 1px solid #a39e9f;
					padding: 5rpx 15rpx;

				}

				.collection {
					border: 1px solid #a39e9f;
					padding: 5rpx 15rpx;
					margin: 0 10rpx;
				}
			}
		}

		.info {
			background-color: white;
			display: flex;
			justify-content: space-between;
			color: #a39e9f;
			margin-bottom: 15rpx;

			.left {
				padding: 10rpx 10rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.right {
				padding: 10rpx 10rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

		}

		.content {
			background-color: white;
			box-sizing: border-box;
			margin: 15rpx 10rpx 0 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			.backgroundWrap {
				color: white;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 10;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.buttonWrap {
					box-sizing: border-box;
					font-size: 35rpx;
					padding: 20rpx 35rpx;
					border: 1px solid white;
					border-radius: 15rpx;
					z-index: 15;
				}
			}
		}

		.comList {
			background-color: white;
			box-sizing: border-box;
			padding-top: 40rpx;

			.title {
				display: flex;
				align-items: center;

				.title-text {
					padding-left: 15rpx;
					font-size: 36rpx;
				}

				.title-sidebar {
					box-sizing: border-box;
					margin-left: 25rpx;
					background-color: $theme-color;
					width: 10rpx;
					height: 34rpx;
					border-radius: 10rpx;
				}
			}

			.comWrap {
				box-sizing: border-box;
				padding-bottom: 110rpx;

				.combox {
					box-sizing: border-box;
					margin: 30rpx 60rpx 10rpx 60rpx;
					border-bottom: 1rpx solid #f5f5f5;

					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.userInfo {
							display: flex;
							align-items: center;

							.avatar {
								width: 50rpx;
								height: 50rpx;
								border-radius: 25rpx;
								overflow: hidden;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.name {
								padding-left: 10rpx;
								font-size: 30rpx;
							}
						}

					}

					.comContent {
						box-sizing: border-box;
						padding: 25rpx 0;
						color: gray;
					}

					.time {
						color: #a7a8ae;
					}
				}
			}

		}

		.toMakeCom {
			z-index: 50;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx 5rpx 20rpx 5rpx;
			border-top: 1rpx solid #f7f7f7;
			box-shadow: 10rpx #f7f7f7;
			background-color: white;

			.toMakeCombox {
				color: gray;
				box-sizing: border-box;
				padding: 15rpx 5rpx 15rpx 35rpx;
				background-color: #f7f7f7;
				border: 1rpx solid #f7f7f7;
				border-radius: 25rpx;
				width: 650rpx;
			}

			.toMakeComicon {
				box-sizing: border-box;
				padding-left: 25rpx;
			}
		}
	}

	.comment {
		box-sizing: border-box;
		background-color: white;
		padding-top: 50rpx;

		.box {
			margin: 15rpx 15rpx;
			height: 150rpx;
			box-sizing: border-box;
			border: 1rpx solid #a39e9f;
			overflow: hidden;
		}

		.evaluate {
			padding: 10rpx 15rpx 35rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>
